<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="application/javascript">
        var socket ;
        //登录过后初始化socket连接
        function initSocket(userId) {
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else {
                console.log("您的浏览器支持WebSocket/websocket");
            }
            if ('WebSocket' in window) {
                //socket连接地址: 注意是ws协议
                socket = new WebSocket("ws://localhost:8080/chat/" + userId);
            }else {
                alert('当前浏览器 Not support websocket')
            }
            socket.onopen = function() {
			
                console.log("Socket 已打开");
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                var histroy = $("#history").val();
				var my=document.getElementById("msg").value;
				var to=document.getElementById("to").value;
                $("#history").val(histroy+"\r\n"+to+"："+msg.data);
				console.log(history);
				console.log(msg.data);
                console.log($(msg));
            };
            //关闭事件
            socket.onclose = function() {
                console.log("Socket已关闭");
            };
            //错误事件
            socket.onerror = function() {
                alert("Socket发生了错误");
            }
            $(window).unload(function(){
                socket.close();
            });
        }
        //点击按钮发送消息
        function send() {
            console.log("发送消息: "+$("#msg").val());
			var to=document.getElementById("to").value;
			var me=document.getElementById("from").value;
			var msg=document.getElementById("msg").value;
			var histroy = $("#history").val();
			var myJSON={};
			myJSON["to"]=to;
			myJSON["msg"]=msg;
			console.log(myJSON);
			var last=JSON.stringify(myJSON);
            socket.send(last);
			$("#history").val(histroy+"\r\n"+me+"："+msg);
            document.querySelector('#msg').value = '';
            var content=document.getElementById("history");
            content.scrollTop = content.scrollHeight;
        }
        //登录
        function login() {
<!--        var formData = new FormData();-->
<!--        formData.append('name', document.getElementById("from").value);-->
<!--        console.log(formData);-->
<!--        $.ajax({-->
<!--        url: "localhost:8080/login",-->
<!--        type: "POST",-->
<!--        data: formData,-->
<!--        contentType:false,-->
<!--            //取消帮我们格式化数据，是什么就是什么-->
<!--        processData:false,-->
<!--        success: function(result){-->
<!--        console.log("aaa");-->
<!--        console.log(result);-->

<!--        }-->

<!--        });-->
          console.log("登录成功!");
          alert("成功");
			var from=document.getElementById("from").value;
                        initSocket(from);
           
        }
        function mysend(e){
        if(!e)
        e=window.event;
        if(e.keyCode==13){
           $("#fsmsg").click();
         }
        }
    </script>
</head>
<body>

<form id="loginForm"  >
    我的昵称: <input name="from" id="from"><br>
    对方昵称: <input name="to" id="to"><br>
    <input type="button" onclick="login()" value="登录">
</form>



<textarea id="msg" placeholder="格式xxx#消息"  style="width: 500px;height: 50px" onkeyup="mysend(event);" ></textarea>
<input id="fsmsg" type="button" onclick="send()" value="发送消息"  >
<br>
<textarea id="history"   style="width: 500px;height: 200px ; max-lines: 10" >
</textarea>
</body>
</html>